<style lang="less">
    @import "tenantMana.less";
</style>
<template>
    <div class="search">
        <Row>
            <Col>
                <Card>
                    <Row>
                        <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
                            <Form-item label="租户名称" prop="tenantName">
                                <Input type="text" v-model="searchForm.tenantName" clearable placeholder="租户名称"
                                       style="width: 200px"/>
                            </Form-item>
                          <Form-item label="租户状态" prop="tenantStatus">
                            <Select v-model="searchForm.tenantStatus" placeholder="请选择" clearable style="width: 200px">
                              <Option value="0">启用</Option>
                              <Option value="1">禁用</Option>
                            </Select>
                          </Form-item>
                            <Form-item style="margin-left:-35px;" class="br">
                                <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
                                <Button @click="handleReset">重置</Button>
                            </Form-item>
                        </Form>
                    </Row>
                    <Row class="operation">
                        <Button @click="add" type="primary" icon="md-add">添加租户</Button>
                        <Button @click="handleSearch" icon="md-refresh">刷新</Button>
                    </Row>
                    <Row>
                        <Alert show-icon>
                           租户信息列表
                        </Alert>
                    </Row>
                    <Row>
                        <Table :loading="loading" border :columns="columns" :data="data" sortable="custom"
                               ref="table">
                            <template slot-scope="{ row, index }" slot="tenantStatus">
                                <div v-if="row.tenantStatus === '0'">
                                    <Tag color="success" size="default">启用</Tag>
                                </div>
                                <div v-else>
                                    <Tag color="error" size="default">禁用</Tag>
                                </div>
                            </template>
                            <template slot-scope="{ row, index }" slot="action">
                                <Button style="margin-right:5px" type="primary" size="small" @click="edit(row)">编辑
                                </Button>
                                <Button v-if="row.tenantStatus==='0'" style="margin-right:5px" type="warning" size="small"
                                        @click="disable(row)">禁用
                                </Button>
                                <Button v-if="row.tenantStatus==='1'" style="margin-right:5px" type="success" size="small"
                                        @click="enable(row)">启用
                                </Button>
                            </template>
                        </Table>
                    </Row>
                    <Row type="flex" justify="end" class="page">
                        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize"
                              @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]"
                              size="small" show-total show-elevator show-sizer></Page>
                    </Row>
                </Card>
            </Col>
        </Row>
        <Modal :title="modalTitle" v-model="tenantModalVisible" :mask-closable='false' :width="500"
               :styles="{top: '90px'}">
            <Form ref="tenantForm" :model="tenantForm" :label-width="70">
                <FormItem label="租户编号" prop="tenantId">
                    <Input v-model="tenantForm.tenantId" autocomplete="off"/>
                </FormItem>
                <FormItem label="租户名称" prop="tenantName">
                    <Input v-model="tenantForm.tenantName" autocomplete="off"/>
                </FormItem>

                <FormItem label="租户状态" prop="roleIds">
                    <Select v-model="tenantForm.tenantStatus">
                        <Option value="0">正常</Option>
                        <Option value="1">锁定</Option>
                    </Select>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="cancelTenant">取消</Button>
                <Button type="primary" :loading="submitLoading" @click="submitTenant">提交</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import {
        page,
        save,
    } from "@/projects/basic/api/admin/tenant";
    import {
        deepClone
    } from "../../../../../libs/utils/ObjectClone";
    import circleLoading from "_c/circle-loading/circle-loading.vue";
    export default {
        name: "tenant-mana",
        components: {
            circleLoading
        },
        data() {
            return {
                loading: true,
                selectCount: 0,
                selectList: [],
                searchKey: "",
                searchForm: {
                    tenantName: "",
                    tenantStatus: "",
                    pageNumber: 1,
                    pageSize: 10
                },
                selectDate: null,
                modalType: 0,
                tenantModalVisible: false,
                modalTitle: "",
                tenantForm: {
                    tenantId: "",
                    tenantName: "",
                    tenantStatus: ""
                },
                submitLoading: false,
                columns: [
                    {
                        title: "租户编号",
                        key: "tenantId",
                        minWidth: 120,
                        fixed: "left"
                    },
                    {
                        title: "租户名称",
                        key: "tenantName",
                        minWidth: 145,
                        fixed: "left"
                    },
                    {
                        title: "状态",
                        key: "status",
                        align: "center",
                        minWidth: 140,
                        slot: "tenantStatus"
                    },
                    {
                        title: "创建人员",
                        key: "createBy",
                        minWidth: 150
                    },
                    {
                        title: "创建时间",
                        key: "createTime",
                        sortable: true,
                        minWidth: 150
                    },
                    {
                        title: "操作",
                        key: "action",
                        minWidth: 200,
                        align: "center",
                        fixed: "right",
                        slot: "action"
                    }
                ],
                data: [],
                total: 0
            };
        },
        methods: {
            init() {
                this.getTenantList();
            },
            changePage(v) {
                this.searchForm.pageNumber = v;
                this.getTenantList();
            },
            changePageSize(v) {
                this.searchForm.pageSize = v;
                this.getTenantList();
            },
            getTenantList() {
                this.loading = true;
                page(this.searchForm).then(res => {
                    this.loading = false;
                    if (res.code === "0000") {
                        this.data = res.data.records;
                        this.total = res.data.total;
                    }
                });
            },
            handleSearch() {
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.getTenantList();
            },
            handleReset() {
                this.$refs.searchForm.resetFields();
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.selectDate = null;
                // 重新加载数据
                this.getTenantList();
            },
            cancelTenant() {
                this.tenantModalVisible = false;
                this.$refs.tenantForm.resetFields();
            },
            submitTenant() {
                this.$refs.tenantForm.validate(valid => {
                    if (valid) {
                        if (this.modalType === 0) {
                            delete this.tenantForm.id;
                            this.submitLoading = true;
                            save(this.tenantForm).then(res => {
                                this.submitLoading = false;
                                if (res.code === "0000") {
                                    this.$Message.success("操作成功");
                                    this.getTenantList();
                                    this.tenantModalVisible = false;
                                }
                            }).catch(() => {
                                this.submitLoading = false;
                                this.loading = false;
                                this.getTenantList();
                            });
                        } else {
                            // 编辑
                            this.submitLoading = true;
                            save(this.tenantForm).then(res => {
                                this.submitLoading = false;
                                if (res.code === "0000") {
                                    this.$Message.success("操作成功");
                                    this.getTenantList();
                                    this.tenantModalVisible = false;
                                }
                            }).catch(() => {
                                this.submitLoading = false;
                                this.loading = false;
                                this.getTenantList();
                            });
                        }
                    }
                });
            },
            add() {
                this.modalType = 0;
                this.modalTitle = "添加租户";
                this.$refs.tenantForm.resetFields();
                this.tenantModalVisible = true;
            },
            edit(v) {
                this.modalType = 1;
                this.modalTitle = "编辑租户";
                this.$refs.tenantForm.resetFields();
                this.tenantForm = deepClone(v);
                this.tenantModalVisible = true;
            },
            enable(v) {
                this.$Modal.confirm({
                    title: "确认启用",
                    content: "您确认要启用租户 " + v.tenantName + " ?",
                    onOk: () => {
                        v.tenantStatus='0';
                        save(v).then(res => {
                            if (res.code === "0000") {
                                this.$Message.success("操作成功");
                                this.getTenantList();
                            }
                        }).catch(()=>{
                            this.submitLoading = false;
                            this.getTenantList();
                        });
                    }
                });
            },
            disable(v) {
                this.$Modal.confirm({
                    title: "确认禁用",
                    content: "您确认要禁用租户 " + v.tenantName + " ?",
                    onOk: () => {
                        v.tenantStatus='1';
                        save(v).then(res => {
                            if (res.code === "0000") {
                                this.$Message.success("操作成功");
                                this.getTenantList();
                            }
                        }).catch(()=>{
                            this.submitLoading = false;
                            this.getTenantList();
                        });
                    }
                });
            }
        },
        mounted() {
            this.init();
        }
    };
</script>
